import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { Button, Animated, LayoutAnimation, Easing, PermissionsAndroid, TextInput, Alert, NavigatorIOS } from 'react-native';
import { R, sh, sw, Adp, Deviceinfo, ART } from '../../tools';
import { Icons, SvgIcon } from '../../res';
import { CommonActions } from '@react-navigation/native';


export default function LoginPage(props) {

    const navigation = props.navigation;


    useEffect(() => {

    }, [])

    return (
        <R.ImageBackground source={require("../../res/imageAssets/redlight.jpg")} style={styles.main} resizeMode={"cover"}>
            <R.View style={{ position: 'absolute', bottom: sh * 0.2, width: sw, height: 'auto' }}>
                <InputForm />
            </R.View>
        </R.ImageBackground>
    )
}

function InputForm() {

    return (
        <R.View style={{ width: sw, height: 'auto', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
            <R.View style={{ justifyContent: 'center', alignItems: 'center' }}>
                <R.Text style={{ color: '#ffffffaa', width: '100%', marginBottom: 8, paddingStart: 7, fontSize: 13 }}>首次登陆账号即注册</R.Text>
                <R.View style={{ width: sw * 0.6, backgroundColor: '#ffffff22', borderRadius: 4 }}>
                    <TextInput
                        style={{ paddingVertical: 0, color: 'white', marginStart: 4 }}
                        placeholder="输入账号"
                        placeholderTextColor="#ffffffaa"
                    />
                </R.View>
                <R.View style={{ width: sw * 0.6, backgroundColor: '#ffffff22', borderRadius: 4, marginTop: 10 }}>
                    <TextInput
                        style={{ paddingVertical: 0, color: 'white', marginStart: 4 }}
                        placeholder="输入密码"
                        placeholderTextColor="#ffffffaa" />
                </R.View>
            </R.View>

            <R.TouchableOpacity activeOpacity={0.9} style={{ marginStart: 10, alignSelf: 'flex-end' }}>
                <SvgIcon name={Icons.right_round} color={"#ffffff99"} size={30} scale={0.0327} />
            </R.TouchableOpacity>

        </R.View>
    )
}

const styles = R.StyleSheet.create({
    main: {
        flex: 1,
        width: sw,
        height: sh,
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    line: {
        fontSize: 15,
        color: 'white',
        marginTop: 8
    },
})